<template>
  <div style=" background: #fff" >
		<div v-if="chenload">
				<div style="font-size: 0.2rem;padding-bottom: 1.08rem" id="tab">
			        <mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
						<div class="top">
							<p>{{arr.title}}</p>
							<span>文章来源：{{arr.source}}</span>
							<span>{{arr.addtime}}</span>
						</div>
						<div class="chenline-pay"></div>
						<div class="con" v-html="arr.content">
							<div></div>
						</div>
						
						<div class="chenline-pay" v-if="arr1.length!=0||arr1.length!='0'"></div>


						<!--相关课程-->
						<div style="margin-top: 0.2rem;" v-if="arr1.length!=0||arr1.length!='0'">
							<div class="v">
								<span class="span1"></span>
								<span class="span2">相关课程</span>
								<div class="ya" v-for="(item,index) in arr1" @click="recom(item)">
									<img :src="img+item.thumb" alt="" class="img2">
									<!-- <img src="static/img/xianshimianfei.png" alt="" style="position: absolute;left: 0;top: 0;width: 0.5rem;height: auto" v-if="item.xprice>0&&item.price==0">
									<img src="static/img/xianshitehui.png" alt="" style="position: absolute;left: 0;top: 0;width: 0.5rem;height: auto" v-if="item.xprice>0&&item.price>0"> -->
									<div>
										<p>{{item.name}}</p>
										<p class="ps">
											<img src="../../../src/assets/img/ren.png" alt="" class="img1" style="width: 0.24rem;
					height: 0.2rem;
					vertical-align: baseline;">
											<span style="color: #C2C9D3;">{{item.hits}}人</span>
											<span v-if="item.price==0||item.price=='0.00'||item.price==0.00||item.price=='0'" class="a1">免费</span>
											<span v-else class="a">￥{{item.price}}</span>
											<span v-if="item.price !=0">￥{{item.xprice}}</span>
										</p>
									</div>
								</div>
								<!---->
							</div>
						</div>
						<div class="chenline-pay"></div>
						<!--最下面-->
						<div class="xg1">
								<div class="x">
									<p></p>
									<p>评论专区</p>
								</div>
									<!-- <div v-if='count!=0||count!="0"'class="page-infinite-wrapper" ref="wrapper"> -->
										<!--<div class="page-infinite-list" v-infinite-scroll="pl" infinite-scroll-distance="50" infinite-scroll-disabled="chenmoreloading">-->
										<!-- <mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail"> -->
								<div id="tabList">
									<div class="clearfix  page-infinite-listitem" style="width: 92%;margin: auto" v-for="(item,index) in tab0.list" @click="likeReply(item.id,item.is_praise,item.rpraise,index)">
										<div style="height: 0.66rem;margin-top: 0.2rem;">
											<img v-if="item.avatar!=''" :src="item.avatar" alt="" class="img">
											<img v-else :src="avatarimg" alt="" class="img">
											<div class="name">
												<p>{{item.nickname}}</p>
												<p>{{item.addtime}}</p>
											</div>
										</div>
										<p class="pp">{{item.reply | base64Decode}}</p>
										<!-- <p class="pp">{{item.reply}}</p> -->
										<p class="zxzan" v-if="item.is_praise==1||item.is_praise=='1'">
											<img src="../../../src/assets/img/buy/zan.png" alt="">
											<span style="color: #0287FF;">{{item.rpraise}}</span>
										</p>
										<p class="zxzan" v-else>
											<img src="../../../src/assets/img/buy/huizan.png" alt="">
											<span>{{item.rpraise}}</span>
										</p>
										<p class="grayx"></p>
									</div>
								</div>
						</div>
					</mescroll-vue>
					<!--底部评论-->
					<div class="in">
						<textarea type="text" maxlength='200' placeholder="点击评论" v-model="comment"></textarea>
						<button @click.stop="com()">评论</button>
					</div>
			    
			    </div>
			<img src="../../../src/assets/img/goback.png" alt="" class="goback" @click="goback()">
			
			<!-- 登录弹窗 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">提示</p>
					<p class="chen-text chen-textactive">您需要先登录?</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
					</div>
				</div>
			</div>
			
		</div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
  </div>
</template>

<script>
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Huodong",
		components: {
		  MescrollVue
		},
      data(){
          return{
						imgSrc3:require('../../assets/img/kongbai.png'),
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						tabType: 0 ,// 菜单类型
						avatarimg:this.$store.state.avatarimg,
						chenload:false,
            arr:[],
            arr1:[],
            pinglun:[],
            img:this.$store.state.img,
            comment:'',
						allLoaded:false,
						page:1,
						count:'',
						noloadzheng:false,
          }
      },
      methods:{
        goback(){
          this.$router.push({
            path:'/'
          })
        },
				// 点击取消
				repeatclose(){
					$('.shoewr-chenhoupass').fadeOut();
				},
				// 点击去登录
				repeatclick(){
					$('.shoewr-chenhoupass').fadeOut();
					this.d();
				},
				recom(item){
					// console.log(item);
					var type = this.arr.type;
					var id = item.lid;
					if(type==1||type=='1'){
					    var flag = item.flag;   //1直播 2点播
						this.$router.push({
							path:'/course',
							query:{
								cid:id
							}
						})
// 						
					}else if(type==2||type=='2'){
						this.$router.push({
							path:'/specialtopic',
							query:{
							 stid:id
							}
						})
					}else if(type==3||type=='3'){
						this.$router.push({
							path:'/class',
							query:{
							 bid:id
							}
						})
					}
				},
				// 评论点赞	
				likeReply(id,is_praise,rpraise,index){
					// console.log(8898)
					if(localStorage.getItem('token')){
						this.axios({
							url:this.$store.state.url + "Find/likeComment",
							params:{
								id:id,
							}
						}).then(res=>{
							// console.log(res.data);
							if (res.data.errcode == 0||res.data.errcode == '0'){
								if(is_praise==0||is_praise=='0'){
									this.$toast({
										 message:'点赞成功',
										 position:'center'
									});
									// console.log(this.pinglun[index])
									this.tab0.list[index].rpraise = Number(this.tab0.list[index].rpraise) +1;
									this.tab0.list[index].is_praise = 1
								}else{
									this.tab0.list[index].rpraise = Number(this.tab0.list[index].rpraise) -1;
									this.tab0.list[index].is_praise = 0
								}
								// this.page = 1;
								// this.pl(0);
							}else{
							}
						})
					}else{
						$('.shoewr-chenhoupass').fadeIn();
					}
				},
				 // 切换菜单
				changeTab () {
				  this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
				  this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
				},
				// 获取菜单对应的数据
				getTabData () {
				   return this.tab0;
				},
				// mescroll组件初始化的回调,可获取到mescroll对象
				mescrollInit0 (mescroll) {
				  // mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
				  this.tab0.mescroll = mescroll;
				},
				// 多mescroll的配置,需通过方法获取,保证每个配置是单例
				getMescrollUp (type) {
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
					  warpId: 'tabList', // 父布局的id;
					  icon: this.imgSrc3, // 图标,默认null
					  tip: '暂时还没有人评论，快抢沙发吧...', // 提示
					  
					},
				  }
				},
				upCallback (page, mescroll) {
					var that = this;
				  // if (mescroll.tabType === 0) {
				    // 学习中
				    // that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
					that.axios.get(that.$store.state.url +'Find/actComment',{
						params:{
							id:that.$route.query.id,
							page:page.num,
							limit:page.size
						}
					}).then(res=>{
						// console.log(111)
					 // that.chenload=true;
					 if(res.data.errcode==0||res.data.errcode=='0'){
						 var curPageData = res.data.data.lists;
						 that.count=res.data.data.count;
						 console.log(that.count)
						  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
						 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
					 }else{
						 
					 }
					})
					
				  // }
				},
				
        com(){
			if(localStorage.getItem('token')){
				var comm = this.comment;
				var name = comm.replace(/\s+/g, "");
				if (name){
					var data = {
						id:this.$route.query.id,//资讯的id
						reply:Base64.encode(name),//回复内容
					}
					this.axios.post(this.$store.state.url + "Find/comment",data).then(res=> {
						
						if (res.data.errcode == 0||res.data.errcode == '0'){
// 							setTimeout(function(){
// 								var h = $(document).height()-$(window).height();
// 								$(document).scrollTop(h);
// 							},300);
							this.comment = '';
							this.$toast({
								message:'评论成功',
								position:'bottom'
							});
							// this
// 							this.page = 1;
// 							this.allLoaded = false;
// 							this.pl(0);
							this.changeTab();
						}else {
							this.$toast({
								message:res.data.msg,
								position:'bottom'
							});
						}
					})
				}else {
					this.$toast({
						message:'请输入内容',
						position:'bottom'
					});
				}
			}else{
				$('.shoewr-chenhoupass').fadeIn();
			}
        },
      },
      mounted(){
		  this.sdk.getJSSDK('','',this.$store.state.url);	
		   this.loginsuccess();
          //登录后
          //获取评论
        // this.pl(0);

          // console.log(document.querySelector('#tab').offsetHeight)

        //活动详情
        this.axios.get(this.$store.state.url +'Find/actDetial',{
          params:{
            id:this.$route.query.id,
			      related:1
          },
		}).then(res=>{
          // console.log(res.data)
			this.chenload=true;
          if (res.data.errcode == 0||res.data.errcode == '0'){
            this.arr = res.data.data.info
            this.arr1 = res.data.data.course
          }
        })



      }
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	  padding-bottom: 1rem;
	}
  .goback{
    width: 1.2rem;
    height: 1.2rem;
    position: fixed;
    right: 0.2rem;
    bottom: 1.5rem;
  }
    .top{
      width: 100%;
      box-sizing:border-box;
      padding: 0.3rem;
      background: #fff;
    }
  .top p{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .top span{
    display: inline-block;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    margin-top: 0.1rem;
  }
  .top span:nth-child(3){
    float: right;
  }
  .con{
    width: 7.5rem;
    box-sizing:border-box;
    padding: 0.3rem;
    background: #fff;
    margin-top: 0.2rem;
  }
  .con div{
    width: 92%;
    margin: auto;
  }
    .con>>>img{
      max-width: 100%;
    }
    .con>>>table{
      display: block;
      max-width: 100%!important;
    }
    .con>>>span{
      white-space: normal!important;
    }
  .xg{
    width: 100%;
    margin-top: 0.2rem;
    background: #fff;
    box-sizing:border-box;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
    .xg1{
      width: 100%;
      margin-top: 0.2rem;
      background: #fff;
      box-sizing:border-box;
      padding-top: 0.3rem;
    }
  .x{
    width: 92%;
    margin: auto;
  }
  .x p:nth-child(1){
    display: inline-block;
    width:0.04rem;
    height:0.28rem;
    background:rgba(2,135,255,1);

  }
    .x p:nth-child(2){
      display: inline-block;
      font-size:0.28rem;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
      vertical-align: top;
      margin-left: 0.1rem;
    }
    .img{
      width: 0.66rem;
      height: 100%;
      float: left;
      border-radius: 50%;
    }
    .name{
      float: left;
      height: 100%;
      margin-left: 0.2rem;
    }
    .name p:nth-child(1){
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
    }
    .name p:nth-child(2){
      font-size:0.24rem;
      color:rgba(194,201,211,1);
      line-height:0.32rem;
      margin-top: 0.05rem;
    }
    .pp{
      font-size: 0.24rem;
      color: #333333;
      margin-top: 0.2rem;
      margin-left: 0.85rem;
	  word-wrap:break-word
    }
		.zxzan{
			float: right;
		}
		.zxzan img{
			width: .27rem;
			height: .27rem;
		}
		.zxzan span{
			color: #C2C9D3;
			font-size: .22rem;
		}
  .grayx{
    height: 0.02rem;
    background: rgba(237,237,237,1);
    margin-top: 0.5rem;
  }
  .in{
    width: 100%;
    height:0.88rem;
    background:rgba(255,255,255,1);
    box-shadow:0 -0.03rem 0.05rem 0 rgba(71,68,80,0.06);
    opacity:0.95;
    position: fixed;
    bottom: 0;
    background:#fff;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  .in textarea{
    width: 5.82rem;
    height: 0.56rem;
    background:rgba(240,240,240,1);
    border:0.01rem solid rgba(237,237,237,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    text-indent: 0.3rem;
    margin-left: 0.3rem;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	padding:0.1rem .3rem .3rem .3rem;
  }
  textarea:focus::placeholder{
	line-height: .56rem;
    color: transparent;
  }
  textarea:placeholder-shown{
    color:rgba(153,153,153,1);
  }
  .in button{
    width:0.88rem;
    height:0.56rem;
    background:rgba(2,135,255,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    color: #fff;
    border: none;
    outline: none;
    margin-left: 0.2rem;
  }
  .v{
    width: 100%;
    background: #fff;
    box-sizing:border-box;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
  }
  .span1{
    display: inline-block;
    width:0.04rem;
    height:0.28rem;
    background:rgba(2,135,255,1);
    /*vertical-align: middle;*/
  }
  .span2{
    margin-left: 0.1rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    vertical-align: top;
  }
  .ya{
    height: 1.18rem;
    margin-top: 0.3rem;
    position: relative;
  }
  .img2{
    width: 2.1rem;
    height: 100%;
    float: left;
    border-radius:0.08rem;
  }
  .ya div{
    height: 100%;
    margin-left: 2.3rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .ya div p:nth-child(1){
    width: 4.6rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .img1{
    width: 0.3rem;
    height: 0.3rem;
  }
  .ps{
    width: 100%;
  }
  .ps span{
    /*font-size:0.24rem;*/
    /*color:rgba(194,201,211,1);*/
    line-height:0.32rem;
  }
  .ps span:nth-child(4){
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    text-decoration:line-through;
    line-height:0.32rem;
    float: right;
    margin-right: 0.2rem;
  }
  .a{
    font-size: 0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    float: right;
  }
  .a1{
    font-size: 0.3rem;
    font-weight:bold;
    color:#0287FF;
    float: right;
  }
</style>
